<template>
  <!-- 根标签 -->
  <div>
     <!-- 标题1：销售趋势分析 -->
     <!-- 图1：分析每日/每月销售额变化，在同一张表显示  -->
    <h1>销售趋势分析</h1>
    <div id="sales-trend-chart" style="width: 100%; display: flex; justify-content: space-between;">
      <div id="daily-sales-chart" style="width: 600px;height:400px; margin-left: 20px;" ></div>
      <div id="monthly-sales-chart" style="width: 600px;height:400px;"></div>
    </div>

  </div>
</template>

<script>
import * as echarts from 'echarts';
import { getMonthlySalesData, getSalesData } from '@/api/order/getDailySalesData'
export default {
  name: 'OrderStatistics',
  data() {
    return {}
  },
  methods: {
    // 初始化图1
    DailySalesChart() {
      const chart = echarts.init(document.getElementById('daily-sales-chart'), null, {
        devicePixelRatio: 2  // 设置为2倍分辨率
      });
      const colors = ['#5470C6', '#EE6666'];

      const option = {
        textStyle: {  // 设置全局的文字样式
          fontSize: 20,  // 字体大小
          color: '#333'  // 字体颜色
        },
        color: colors,
        tooltip: {
          trigger: 'none',
          axisPointer: {
            type: 'cross'
          }
        },
        legend: {},
        grid: {
          top: 80,  // 增加顶部空间
          bottom: 80,  // 增加底部空间
          left: 100,  // 增加左侧空间
          right: 50   // 增加右侧空间
        },
        xAxis: [
          {
            type: 'category',
            axisTick: {
              alignWithLabel: true
            },
            axisLine: {
              onZero: false,
              lineStyle: {
                color: colors[0]
              }
            },
            axisLabel: {
              color: '#333',  // X轴标签字体颜色
              fontSize: 16,  // X轴标签字体大小
              rotate: 30,  // 旋转X轴标签以避免重叠
              margin: 15  // 设置X轴标签与轴之间的距离
            },
            name: '日期',  // X轴标题
            nameLocation: 'end',  // 设置标题位置为轴的末尾
            nameGap: 0,  // 设置标题与轴之间的距离
            nameTextStyle: {
              color: '#333',  // 字体颜色
              fontSize: 22,  // 字体大小
            },
            data: [
              '2025-5-1', '2025-5-2', '2025-5-3', '2025-5-4', '2025-5-5',
              '2025-5-6', '2025-5-7', '2025-5-8', '2025-5-9', '2025-5-10',
              '2025-5-11', '2025-5-12', '2025-5-13', '2025-5-14', '2025-5-15',
              '2025-5-16', '2025-5-17', '2025-5-18', '2025-5-19', '2025-5-20',
              '2025-5-21', '2025-5-22', '2025-5-23', '2025-5-24', '2025-5-25',
              '2025-5-26', '2025-5-27', '2025-5-28', '2025-5-29', '2025-5-30',
              '2025-5-31'
            ]
          },
        ],
        yAxis: [
          {
            type: 'value',
            name: '销售额',  // Y轴标题
            nameLocation: 'end',  // 设置标题位置为轴的末尾
            nameGap: 30,  // 设置标题与轴之间的距离
            nameTextStyle: {
              color: '#333',  // 字体颜色
              fontSize: 22,  // 字体大小
              padding: [20, 0, 0, 0]  // 标题与轴的距离
            },
            axisLabel: {
              color: '#333',  // Y轴标签字体颜色
              fontSize: 16,  // Y轴标签字体大小
              margin: 15  // 设置Y轴标签与轴之间的距离
            }
          }
        ],
        series: [
          {
            name: '5月份每日销售额',
            type: 'line',
            xAxisIndex: 0,
            smooth: true,
            emphasis: {
              focus: 'series'
            },
            data: []
          },
        ]
      };

      // 发送请求获取数据
      getSalesData().then(res => {
        option.series[0].data = res.data;
        chart.setOption(option);
      });
    },
    MonthlySalesChart() {
      const chart = echarts.init(document.getElementById('monthly-sales-chart'), null, {
        devicePixelRatio: 2  // 设置为2倍分辨率
      });
      const option = {
        title: {  // 添加标题
          text: '2025年每月销售额统计',  // 标题文本
          left: 'center',  // 标题位置
          textStyle: {
            fontSize: 22,  // 字体大小
            color: '#333'  // 字体颜色
          }
        },
        xAxis: {
          type: 'category',
          data: [
            '1', '2', '3', '4',
            '5', '6', '7', '8',
            '9', '10', '11', '12'
          ],
          name: '月份',  // X轴标签
          nameTextStyle: {
            color: '#333',  // 字体颜色
            fontSize: 18  // 字体大小
          }
        },
        yAxis: {
          type: 'value',
          name: '月销售额',  // Y轴标签
          nameTextStyle: {
            color: '#333',  // 字体颜色
            fontSize: 18  // 字体大小
          }
        },
        series: [
          {
            data: [],
            type: 'bar'
          }
        ]
      };

      // 发送请求获取数据
      getMonthlySalesData().then(res => {
        option.series[0].data = res.data;
        chart.setOption(option);
      });
    }

  },

  mounted() {
    //然后在mounted中调用initChart1方法
    this.DailySalesChart();    // 每日销售额图表初始化
    this.MonthlySalesChart();   // 每月销售额图表初始化
  }
}
</script>

<style>

</style>
